import React from 'react'
import { NavBar, Button, Form, Input, DatePicker } from 'antd-mobile'
import { CameraOutline } from 'antd-mobile-icons'

const App = () => {
  return (
    <div>
      <NavBar>新增乘客</NavBar>
      <Button block color='primary' size='large'>
        <CameraOutline />扫码证件添加
      </Button>
      <Form
        layout='horizontal'
        footer={
          <Button block type='submit' color='primary' size='large'>
            提交
          </Button>
        }
      >
        <Form.Item
          name='birthday'
          label='乘客类型'
          onClick={(e, datePickerRef) => {
            datePickerRef
          }}
        >
           <div>请选择乘客类型</div>
        </Form.Item>
        <Form.Item
          name='name'
          label='姓名'
          rules={[{ required: true, message: '姓名不能为空' }]}
        >
          <Input placeholder='请输入姓名' />
        </Form.Item>
         <Form.Item
          name='birthday'
          label='证件类型'
          onClick={(e, datePickerRef) => {
            datePickerRef
          }}
        >
           <div>请选择证件类型</div>
        </Form.Item>
        <Form.Item
          name='code'
          label='证件号码'
          rules={[{ required: true, message: '证件号码不能为空' }]}
        >
          <Input placeholder='请输入证件号码' />
        </Form.Item>
        <Form.Item
          name='tel'
          label='手机号'
          rules={[{ required: true, message: '手机号不能为空' }]}
        >
          <Input placeholder='请输入手机号' />
        </Form.Item>
      </Form>
    </div>
  )
}

export default App
